<template>
	<view class="container">
		<view class="line"></view>
		<view class="findwork-form">
			<view class="findwork-item">
				<text class="findowork-itemtitle">标题</text>
				<textarea placeholder="请填写标题名称" :auto-height="true"></textarea>
			</view>
			<view class="findwork-item">
				<text class="findowork-itemtitle">擅长</text>
				<textarea placeholder="请填写擅长" :auto-height="true"></textarea>
			</view>
			<view class="findwork-item">
				<text class="findowork-itemtitle">手机号</text>
				<input type="number" value="" placeholder="请填写手机号" maxlength="11"/>
			</view>
			<view class="findwork-item">
				<text class="findowork-itemtitle">期望薪资</text>
				<input type="text" value="" placeholder="请填写多少钱/天/月/一平米"/>
			</view>
			<view class="findwork-item group">
				
				<u-dropdown height="80" ref="classdrop">
						<u-dropdown-item title="分类" >
							<view class="drop-content">
								<input placeholder="请选择分类" :disabled="true" value="" class="selectclass"/>
								<view class="classlist">
									<view class="classitem">
										<text>散工</text>
									</view>
									<view class="classitem">
										<text>技工</text>
									</view>
									<view class="classitem">
										<text>企业</text>
									</view>
								</view>
							</view>
						</u-dropdown-item>
				</u-dropdown>
				<input type="text" value="" placeholder="请选择分类" :disabled="true"/>
			</view>
			<!-- <view class="upload-images">
				<view class="upload-images-top">
					<text class="upload-images-title">上传图片 <text style="color: #FF7474;font-size: 25rpx;margin-left: 10rpx;">（非必选项）</text></text>
					<text class="upload-images-num">{{uploadcount}}/4</text>
				</view>
				<view class="upload-images-list">
					<u-upload :action="uploadImage" max-count="4" @on-success="uploadImagesSuccess"></u-upload>
				</view>
			</view> -->
			<view class="findwork-item">
				<text class="findowork-itemtitle">地址</text>
				<input type="text" value="" placeholder="请填写工作地址"/>
			</view>
			<view class="findwork-item">
				<text class="findowork-itemtitle">要求</text>
				<textarea class="yaoqiuTextarea" placeholder="找水电工活，期望薪资....."></textarea>
			</view>
		</view>
		<view class="submit-findwork">
			<text>发布</text>
		</view>
	</view>
</template>

<script>
	import {uploadImage} from '@/apis/request.js';
	export default {
		data() {
			return {
				groupValue:-1,
				uploadImage:'',
				uploadcount:0
			}
		},
		created() {
			this.uploadImage=uploadImage;
		},
		methods: {
			uploadImagesSuccess(data, index, lists, name){
				this.uploadcount=lists.length;
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 min-height: 100%;
		 .line{
			 width: 100%;
			 height: 15rpx;
			 background-color: #F4F8FB;
		 }
		 .findwork-form{
			 width: 680rpx;
			 min-height: 100%;
			 margin:auto;
			 .findwork-item{
				 width: 100%;
				 height: auto;
				 padding-top: 20rpx;
				 padding-bottom: 30rpx;
				 border-bottom: 1rpx solid #F1F1F1;
				 .findowork-itemtitle{wdith:100%;font-size: 28rpx;color: #222222;}
				 textarea{margin-top: 20rpx;width: 100%;font-size: 26rpx;}
				 input{margin-top: 20rpx;width: 100%;font-size: 26rpx;}
				 .yaoqiuTextarea{
					 background-color: rgba(243, 243, 243, 1);
					 height: 200rpx;
					 width: 640rpx !important;
					 padding: 20rpx;
				 }
			 }
			 .group{
				 padding-top: 0rpx ;
				 input{margin-top: 0rpx;width: 100%;font-size: 26rpx;}
			 }
		 }
		 .drop-content{
			 width: 100%;
			 height: auto;
			 padding-bottom: 30rpx;
			 background-color: #FFFFFF;
		 }
		 .classlist{
			  width: 100%;
			  background-color: #FFFFFF;
			  height: auto;
			  display: flex;
			  justify-content: space-between;
			  flex-wrap: wrap;
			  padding-bottom: 20rpx;
			  .classitem{width: 180rpx;height: 70rpx;background-color: #E8ECF2; font-size: 26rpx;display:flex;justify-content: center;align-items: center;border-radius: 10rpx;}
		      border-bottom: 1rpx solid #F1F1F1;
		 }
		 .selectclass{
			 width: 100%;
			 font-size: 26rpx;
			 margin-bottom:20rpx;
			 margin-top: 0rpx !important;
		 }
		 .upload-images{
			 width: 680rpx;
			 height: auto;
			 padding-top: 20rpx;
			 .upload-images-top{
				 width:680rpx;
				 height: auto;
				 display: flex;
				 justify-content: space-between;
				 .upload-images-title{font-size: 28rpx;}
				 .upload-images-num{color: #888888;font-size: 28rpx;}
			 }
			 .upload-images-list{width: 680rpx;height: auto;margin-top: 30rpx;}
			 padding-bottom: 30rpx;
			 border-bottom: 1rpx solid #F1F1F1;
		 }
		 .submit-findwork{
			 background: rgba(14, 174, 100, 1);
			 color: #FFFFFF;
			 font-size: 28rpx;
			 width: 680rpx;
			 height: 90rpx;
			 margin: auto;
			 text-align: center;
			 line-height: 90rpx;
			 border-radius: 10rpx;
			 margin-bottom: 30rpx;
		 }
	 }
</style>
